<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
    <link rel="stylesheet" href="./css/gwc.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <!-- 有用户名数据 -->
                    <!-- <a href="javascript:;"><i class="iconfont icon-user">用户名</i></a> -->
                    <!-- 没有用户名数据 -->
                    <a href="login/login.html">请先登录</a>
                </li>
                <li>
                    <!-- 有用户名数据 -->
                    <!-- <a href="javascript:;">退出登录</a> -->
                    <!-- 没有用户名数据 -->
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="./center-order.html">我的订单</a>
                </li>
                <li>
                    <a href="./center.html">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont icon-shouji"></i>
                        手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="#">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li>
                        <a href="./category01.html">生鲜</a>
                    </li>
                    <li>
                        <a href="./category01.html">美食</a>
                    </li>
                    <li>
                        <a href="./category01.html">餐厨</a>
                    </li>
                    <li>
                        <a href="./category01.html">电器</a>
                    </li>
                    <li>
                        <a href="./category01.html">居家</a>
                    </li>
                    <li>
                        <a href="./category01.html">洗护</a>
                    </li>
                    <li>
                        <a href="./category01.html">孕婴</a>
                    </li>
                    <li>
                        <a href="./category01.html">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="./cart-none.html" class="xtx_search_cart sprites">
                    <span class="iconfont icon-gouwuche"></span>
                    <i class="spnum">1</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <i class="iconfont icon-guanbi"></i>
                    <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
                </div>
            </div>
        </div>
    </div>
    <!--隐藏盒子 -->
    <div class="headerTwo">
        <div class="content">
            <h1 class="logo"></h1>
            <ul class="app-header-nav">
                <li>首页</li>
                <li>居家</li>
                <li>美食</li>
                <li>服饰</li>
                <li>母婴</li>
                <li>个护</li>
                <li>严选</li>
                <li>数码</li>
                <li>运动</li>
                <li>杂项</li>
                <li>|</li>
                <li>品牌</li>
                <li>专题</li>
            </ul>
        </div>
    </div>


    <!-- 购物车页面开始 -->
    <div class="app-body">
        <div class="container">
            <!-- 首页>购物车 -->
            <div class="xtx-bread">
                <a href="">首页</a>
                <i class="iconfont icon-xiangyoujiantou"></i>
                <a href="" class="text-gwc">购物车</a>
            </div>
            <!-- 商品部分 -->
            <div class="cart">
                <table>
                    <!-- 单选框全选模块 -->
                    <thead>
                        <tr>
                            <th width="120">
                                <div class="xtx-checkbox">
                                    <input type="checkbox" checked>
                                    <span>全选</span>
                                </div>

                            </th>
                            <th width="400">商品信息</th>
                            <th width="220">单价</th>
                            <th width="180">数量</th>
                            <th width="180">小计</th>
                            <th width="140">操作</th>
                        </tr>
                    </thead>
                    <!-- 商品展示模块 -->
                    <tbody class="commodity">
                        <!-- 没有商品界面 -->
                        <!-- <tr>
                            <td colspan="6">
                                <div class="cart-none" style="text-align: center;">
                                    <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
                                    <p>购物车内暂时没有商品</p>
                                    <div class="btn" style="margin: 20px;">
                                        <button class="xtx-button ellipsis middle primary">继续逛逛</button>
                                    </div>
                                </div>
                            </td>
                        </tr> -->
                        <!-- 有商品界面 -->
                        <tr>
                            <td>
                                <input type="checkbox" name="" id="" checked>
                            </td>
                            <td>
                                <div class="goods">
                                    <img src="	https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg"
                                        alt="">
                                    <div class="inter">
                                        <p>休闲潮流运动男士胸包</p>
                                        <p>颜色：深黛蓝</p>
                                    </div>
                                </div>
                            </td>
                            <td class="tc">
                                <p>¥136</p>
                            </td>
                            <td class="tc">
                                <div class="xtx-numbox">
                                    <div class="numbox">
                                        <!-- <a href="" class="jian">-</a> -->
                                        <span>-</span>
                                        <input type="text" value="1">
                                        <a href="" class="jia">+</a>
                                    </div>
                                </div>
                            </td>
                            <td class="tc">
                                <p class="f16">¥136.00</p>
                            </td>
                            <td class="tc">
                                <p>移入收藏夹</p>
                                <p class="green">删除</p>
                                <p>找相似</p>
                            </td>
                        </tr>



                    </tbody>
                </table>
            </div>
            <!-- 结算部分 -->
            <div class="action">
                <div class="total">
                    共 0 件有效商品，已选择 0 件，商品合计：
                    <span class="allMoney">¥136.00</span>
                    <button class="xtx-button ellipsis middle primary"><a href="payorder.html">下单结算</a></button>
                </div>
            </div>
        </div>
    </div>
    <!-- 购物车页面结束 -->


    <!-- 公共底部 -->
    <div class="xtx_footer clearfix">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面滚动
        window.addEventListener('scroll', function () {
            const header = document.querySelector('.xtx_header')
            const headerTwo = document.querySelector('.headerTwo')
            if (document.documentElement.scrollTop > header.offsetTop) {
                headerTwo.style.opacity = 1
                headerTwo.style.transform = 'translateY(0)'
            } else {
                headerTwo.style.opacity = 0
                headerTwo.style.transform = 'translateY(-100)'
            }
        })

        // 商品数量
        const input = document.querySelector('.numbox>input')
        const numbox = document.querySelector('.numbox')
        let num = 1
        let money = 136
        let sum = num * money
        const f16 = document.querySelector('.f16')
        const allMoney = document.querySelector('.allMoney')
        const spnum = document.querySelector('.spnum')

        numbox.addEventListener('click', function (e) {
            e.preventDefault()
            if (e.target.tagName === 'A') {
                num++
                input.value = num
                sum = num * money
                f16.innerHTML = `${sum}.00`
                allMoney.innerHTML = `${sum}.00`
                spnum.innerHTML = num
            }
            if (e.target.tagName === 'SPAN') {
                num--
                if (num <= 2) {
                    num = 1
                }
                input.value = num
                sum = num * money
                f16.innerHTML = `${sum}.00`
                allMoney.innerHTML = `${sum}.00`
                spnum.innerHTML = num
            }
        })

        const green = document.querySelector('.green')
        const commodity = document.querySelector('.commodity')
        const inputAll = document.querySelector('.xtx-checkbox>input')
        green.addEventListener('click', function () {
            // console.log(11);
            commodity.innerHTML = `
             <tr>
                <td colspan="6">
                <div class="cart-none" style="text-align: center;">
                    <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
                        <p>购物车内暂时没有商品</p>
                        <div class="btn" style="margin: 20px;">
                            <button class="xtx-button ellipsis middle primary">继续逛逛</button>
                        </div>
                </div>
                </td>
            </tr>
            `
            inputAll.checked = false
            allMoney.innerHTML = `￥0.00`
        })






    </script>
</body>

</html>